<!--  -->
<template>
  <div class="login_container">
      <h2 style="color: #fff; text-align: center; padding-top:180px;">后台管理登陆系统</h2>
      <div class="login_box">
        <div class="avatar_box">
          <img src="../assets/logo.png" alt="图片">
        </div>

        <el-form   ref="ruleForm"  :rules="loginFormRules" label-width="0px" class="login_form" :model="loginForm">
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input  type="password"  v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
          </el-form-item>
           <!-- 按钮区域 -->
           <el-form-item class="btns">
            <el-button @click="login" type="primary" round >登录</el-button>
            <el-button type="success" round>Sign in</el-button>
          </el-form-item>
          
        </el-form>
       

      </div>
  </div>
</template>

<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.loginFormRules.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
    return {
      //登录的数据绑定对象
       loginForm: {
         username:'admin',
         password:'123456' ,
         checkPass: ''
       },
       //表单的验证规则对象
       loginFormRules: { 
         username:[
           { required: true, message: '请输入登录名', trigger: 'blur'},
           { min: 3, max: 10, message: '长度在 3 到 10 个字符之间', trigger: 'blur' }
         ],
         password:[
            { validator: validatePass, trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符之间', trigger: 'blur' }
         ]
       }
    };
  },
  
  methods: {
    login(){
      this.$refs.ruleForm.validate( (valid) => {
        console.log(valid)//true为表单预验证成功，false则为表单预验证失败
        if(!valid) return
        const re = this.$http.post("login", this.loginForm)
        re.then((reject, resolve) => {
            if(reject){
              console.log('promsie请求成功，响应对象为：')
              const { data: res } = reject
              if( res.meta.status !== 200 ){
                this.$message.error('登录失败，请检查用户名或密码是否正确')
              }else {
                this.$message.success('登录成功')
                 //1、保存登录成功之后的token，保存到客户端的 sessionStorage中
                window.sessionStorage.setItem('token', res.data.token)
                this.$router.push('/home')
                //2、项目出了登录之外的其他API接口，必须登录之后才能访问
                //3、通过编程式路由导航跳至登陆成功的后台主页/home
              }
            }else{
              console.log('promise响应失败，错误对象为：' + resolve.data)
            }
        })
      } )
    }
  },

  components: {},

  
}

</script>
<style lang='less' scoped>
 .login_container{
    background-color: #2b4b6b;
    height: 1000%;
  }
  .login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box{
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd; 
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
  }

  .btns {
    display: flex;
    justify-content: center;
  }

  .login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
</style>